<template>
  <a-col>
    <img :src="imgSrc" class="carIcon">
    <div class="stastic-label">
      {{ stasticData.label }}
    </div>
    <div>
      <div class="stastic-num">
        {{ stasticData.num }}
        <span class="stastic-unit">{{ stasticData.unit }}</span>
      </div>
    </div>
  </a-col>
</template>

<script>
export default {
  name: 'StasticCategory',
  data() {
    return {
    }
  },
  computed: {
    imgSrc() {
      return require('@/assets/img/home/' + this.stasticData.key + '.png')
    }
  },
  props: {
    stasticData: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style scoped lang="less">
.stastic-label {
  color: #646A71;
  font-size: 0.16rem;
  font-weight: 400;
}

.stastic-num {
  color: #181B39;
  font-size: 0.24rem;
  font-weight: bold;
}

.stastic-unit {
  color: #949494;
  font-size: 0.13rem;
  font-weight: 400;
}

.carIcon {
  width: 50px;
  height: 50px;
}
</style>
